{include file="$header"}
<div class="mk-app-warp" style="background-color: #ffffff">
    <div class="mk-card-tabs">
        <el-tabs type="card" v-model="search.install" @tab-click="getData">
            <el-tab-pane
                v-for="(item, index) in paneList" 
                :key="index"
                :label="item" 
                :name="String(index)">
                <el-form 
                    :inline="true" 
                    :model="search"
                    size="small"
                    @submit.native.prevent>
                    <el-form-item>
                        <el-popover
                            placement="bottom"
                            width="400"
                            trigger="click">
                            <el-form :model="login" label-width="80px">
                                <el-form-item label="平台账号">
                                    <el-input v-model="login.account" placeholder="填写您在OneKeyAdmin官网上购买主题的账号"></el-input>
                                </el-form-item>
                                <el-form-item label="平台密码">
                                    <el-input v-model="login.password" placeholder=""></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-upload
                                        :action="admin_url('themes/upload')"
                                        :show-file-list="false"
                                        :data="login"
                                        :on-success="zipSuccess"
                                        accept="aplication/zip">
                                        <el-button type="primary" size="small">确定上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <el-button type="warning" size="small" slot="reference">上传主题包</el-button>
                        </el-popover>
                        <el-button 
                            type="info"
                            icon="el-icon-refresh" 
                            @click="searchData()">
                            <span class="title">刷新</span>
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-input 
                            placeholder="主题名称关键词搜索" 
                            v-model="search.keyword" 
                            @keyup.enter.native="searchData()">
                            <el-button 
                                slot="append" 
                                icon="el-icon-search" 
                                @click="searchData()">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-card class="mk-plugins-catalog" shadow="hover" v-show="index == 0">
                    <div class="mk-plugins-catalog-item">
                        <div class="title">分类:</div>
                        <ul>
                            <li @click="catalogChange('')">
                                <el-link :underline="false" :class="{active: search.catalog_id === ''}">全部</el-link>
                            </li>
                            <li v-for="(item, index) in catalog" @click="catalogChange(item.id)">
                                <el-link :underline="false" :class="{active: search.catalog_id === item.id}">{{item.title}}</el-link>
                            </li>
                        </ul>
                    </div>
                    <div class="mk-plugins-catalog-item">
                        <div class="title">价格:</div>
                        <ul>
                            <li v-for="(item, index) in price" @click="priceChange(item.value)">
                                <el-link :underline="false" :class="{active: search.price === item.value}">{{item.title}}</el-link>
                            </li>
                        </ul>
                    </div>
                    <div class="mk-plugins-catalog-item">
                        <div class="title">排序:</div>
                        <ul>
                            <li v-for="(item, index) in order" @click="sortChange(item.value)">
                                <el-link :underline="false" :class="{active: search.prop === item.value}">{{item.title}}</el-link>
                            </li>
                        </ul>
                    </div>
                </el-card>
                <el-card 
                    style="margin-bottom:20px"
                    class="mk-plugins-set" 
                    shadow="hover" 
                    v-show="index === 1">
                    <div slot="header" class="clearfix">启动主题</div>
                    <div>
                        <el-form>
                            <el-form-item label="电脑主题：">
                                <el-select v-model="theme.pc_template" placeholder="请选择" filterable>
                                    <el-option
                                        v-for="(item, index) in table" 
                                        :key="index" 
                                        :label="item.title"
                                        :value="item.name">
                                        <span style="float: left">{{ item.title }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px;width: 60px;text-align: left;overflow: hidden;">{{ item.name }}</span>
                                    </el-option>
                                </el-select>
                                <el-button 
                                    type="warning" 
                                    icon="el-icon-refresh-right"
                                    @click="configOpen(theme.pc_template, 'pc')" 
                                    v-if="configAuthority" 
                                    :loading="configPcOpenLoading">
                                    设置配置
                                </el-button>
                            </el-form-item>
                            <el-form-item label="手机主题：">
                                <el-select v-model="theme.mp_template" placeholder="请选择" filterable>
                                    <el-option
                                        v-for="(item, index) in table" 
                                        :key="index" 
                                        :label="item.title"
                                        :value="item.name">
                                        <span style="float: left">{{ item.title }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px;width: 60px;text-align: left;overflow: hidden;">{{ item.name }}</span>
                                    </el-option>
                                </el-select>
                                <el-button 
                                    type="warning" 
                                    icon="el-icon-refresh-right"
                                    @click="configOpen(theme.mp_template, 'mp')" 
                                    v-if="configAuthority" 
                                    :loading="configMpOpenLoading">
                                    设置配置
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button 
                                    type="primary"
                                    @click="edit()" 
                                    icon="el-icon-refresh-right"
                                    :loading="editLoading" 
                                    :disabled="editAuthority === false">
                                    确定修改
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
                <div class="mk-themes" v-loading="loading">
                    <template v-if="table.length === 0">
                        <div class="mk-emptyList">暂无主题信息</div>
                    </template>
                    <template v-else>
                        <template v-for="(item, key) in table" :key="key">
                            <div class="mk-themes-item" v-if="item.name !== 'template'">
                                <i class="mk-themes-count" v-if="index == 0">{{item.download}}次安装</i>
                                <i class="mk-themes-count" v-if="theme.pc_template == item.name || theme.mp_template == item.name">使用中</i>
                                <div class="mk-themes-img">
                                    <div class="mk-themes-animation">
                                        <img class="mk-themes-scrollImg" :src="item.cover">
                                    </div>
                                </div>
                                <div class="mk-themes-tool">
                                    <div class="mk-themes-name">
                                        <span class="title">{{item.title}}</span> 
                                        <span class="price" :class="{free: item.price == 0}">{{item.price == 0 ? '免费' : item.price}}</span>
                                    </div> 
                                    <div class="mk-themes-view">
                                        <el-button
                                            @click="previewClick(item.name, item.type)"
                                            size="small" 
                                            type="primary" 
                                            round>
                                            预览
                                        </el-button>
                                        <el-button 
                                            v-show="item.status == 0 && item.need_pay == 0"
                                            :loading="item.installLoading"
                                            @click="install(item)"  
                                            size="small" 
                                            type="success" 
                                            icon="el-icon-refresh-right"
                                            round>
                                            安装
                                        </el-button>
                                        <el-button 
                                            v-show="item.status == 0 && item.need_pay == 1"
                                            @click="shop(item)"  
                                            size="small" 
                                            type="warning" 
                                            icon="el-icon-goods"
                                            round>
                                            购买
                                        </el-button>
                                        <el-button 
                                            v-if="delAuthority"
                                            v-show="item.status == '1'"
                                            @click="del(item)" 
                                            size="small" 
                                            type="danger" 
                                            icon="el-icon-refresh-delete"
                                            round>
                                            卸载
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
                <el-pagination
                    @current-change="pageChange"
                    :current-page="search.page"
                    :page-size="search.pageSize"
                    :total="pageTotal"
                    layout="total, prev, pager, next, jumper"
                    background
                    hide-on-single-page>
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-dialog
        class="mk-order-dialog"
        :before-close="orderClose"
        title="购买主题模板"
        :visible.sync="dialog"
        width="650px">
        <iframe :src="api + '/system/themes/orderDetails?orderId=' + order.id"></iframe>
    </el-dialog>
</div>
{include file="themes/preview"}
{include file="themes/drawer"}
{include file="$component"}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                table: [],
                order: {},
                shopRaw: {},
                dialog: false,
                login: {
                    account: '',
                    password: '',
                },
                theme: {:json_encode($theme)},
                paneList: ['主题中心','已安装'],
                search:{
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 60,
                    prop: "sort", 
                    order: "descending",
                    price: "all",
                    catalog_id: "",
                    install: "0",
                },
                price:[
                    {title: "全部", value: "all"},
                    {title: "免费", value: "free"},
                    {title: "付费", value: "price"}
                ],
                order:[
                    {title: "默认", value: "sort"},
                    {title: "按下载次数", value: "download"},
                    {title: "按发布时间", value: "create_time"},
                    {title: "按更新时间", value: "update_time"}
                ],
                catalog: {:json_encode($catalog)},
                pageTotal: 0,
                url: "themes/index",
                orderUrl: 'themes/createOrder',
                delUrl: "themes/delete",
                editUrl: "themes/update",
                installUrl: "themes/install",
                configUrl: "themes/config",
                configEditUrl: "themes/configUpdate",
                loading: false,
                editLoading: false,
                preview: {
                    drawer: false,
                    url: "",
                    mobile: false,
                },
                configDrawer: false,
                configSaveLoading: false,
                configMpOpenLoading: false,
                configPcOpenLoading: false,
                configData: {
                    name: '',
                    title: '',
                    config: '',
                },
            }
        },
        created () {
            this.getData();
        },
        computed: {
            delAuthority() {
                return authorityPath.indexOf(this.delUrl) !== -1;
            },
            editAuthority() {
                return authorityPath.indexOf(this.editUrl) !== -1;
            },
            installAuthority() {
                return authorityPath.indexOf(this.installUrl) !== -1;
            },
            configAuthority() {
                return authorityPath.indexOf(this.configUrl) !== -1;
            },
            configEditAuthority() {
                return authorityPath.indexOf(this.configEditUrl) !== -1;
            },
        },
        methods: {
            /**
             * 打开主题配置
             */
            configOpen(name, type) {
                let self = this;
                type === 'pc' ? self.configPcOpenLoading = true : self.configMpOpenLoading = true;
                request.post(self.configUrl, {'name': name}, function(res) {
                    type === 'pc' ? self.configPcOpenLoading = false : self.configMpOpenLoading = false;
                    self.configData = Object.assign({}, this.configData, {name: name, config: res.data.config, title: res.data.title});
                    self.configDrawer = true;
                })
            },
            configSave() {
                let self = this;
                self.configSaveLoading = true;
                request.post(self.configEditUrl, this.configData, function(res) {
                    self.configSaveLoading = false;
                    if (res.status === 'success') {
                        self.configDrawer = false;
                    } else {
                        self.$message({ showClose: true, message: res.message, type: res.status });
                    }
                })
            },
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                request.post(self.url, self.search, function(res) {
                    self.loading   = false;
                    self.table     = res.data;
                    self.pageTotal = res.count;
                    self.table.forEach(function (item, index) {
                        item['installLoading'] = false;
                        self.$set(self.table, index, item);
                    });
                });
            },
            /**
             * 关闭订单
             */
            orderClose() {
                this.install(this.shopRaw);
                this.dialog = false;
            },
            /**
             * 购买主题
             * @param  {Object} row 当前行
             */
            shop(row) {
                let self = this;
                request.post(self.orderUrl, {id: row.id}, function(res) {
                    if (res.status === 'success') {
                        self.order  = res.data;
                        self.dialog = true;
                        self.shopRaw = row;
                    } else {
                        self.$message({ showClose: true, message: res.message, type: 'error'});
                    }
                });
            },
            /**
             * 排序
             */
            sortChange(v) {
                this.search = Object.assign({}, this.search, {prop: v});
            },
            /**
             * 主题安装
             * @param  {Object} row 当前行
             */
            install(row) {
                let self  = this;
                let index = self.table.indexOf(row);
                row.installLoading = true;
                self.$set(self.table, index, row);
                request.post(self.installUrl, row, function(res) {
                    row.installLoading = false;
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    if (res.status === 'success') {
                        row.status  = '1';
                    }
                    self.$set(self.table, index, row);
                });
            },
            /**
             * 主题管理
             */
            edit() {
                let self = this;
                self.editLoading = true;
                request.post(self.editUrl, self.theme, function(res) {
                    self.editLoading = false;
                    self.$message({ showClose: true, message: res.message, type: res.status});
                });
            },
            /**
             * 行删除、批量删除
             * @param  {Object} row 当前行
             */
            del(row) {
                let self = this;
                self.$confirm('确定卸载'+row.title+'主题吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(self.delUrl, {name: row.name}, function(res){
                        if (res.status === 'success') {
                            self.getData();
                        } else {
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                }).catch(() => {});
            },
            /**
             * 关键词/日期搜索
             */
            searchData(value) {
                this.search = Object.assign({}, this.search, {page: 1});
            },
            /**
             * 分类搜索
             * @param  {Object} value 搜索内容
             */
            catalogChange(value) {
                this.search = Object.assign({}, this.search, {page: 1, catalog_id: value});
            },
            /**
             * 价格类目搜索
             * @param  {Object} value 搜索内容
             */
            priceChange(value) {
                this.search = Object.assign({}, this.search, {page: 1, price: value});
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            },
            /**
             * 主题预览
             */
            previewClick(name, type) {
                console.log(name);
                this.preview = Object.assign({}, this.preview, {mobile: type === 2 ? true : false, drawer: true, url: api + '?theme=' + name});
            },
            /**
             * 安装包上传成功
             */
            zipSuccess(res, file) {
                if (res.status === 'success') {
                    this.getData(); 
                }
                this.$message({ showClose: true, message: res.message, type: res.status});
            },
        },
        watch: {
            search() {
                this.getData();
            },
            configDrawer(v) {
                if(! v){
                    this.configData = Object.assign({}, this.configData, {name: "", config: "", title: ""});
                }
            },
        }
    })
</script>
{include file="$footer" /}